<template>
    <div>
        <div style="text-align: right;">
            <div>
                <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="search.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="search.code" placeholder="请输入工号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch" size="mini" icon="el-icon-search" class="light-blue-btn">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table
            :data="list"
            stripe
            style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="code"
                label="工号"
            >
            </el-table-column>  
            <el-table-column
                prop="roles"
                label="角色"
            >
                <template slot-scope="scope">
                    <el-tag v-for="item in scope.row.roles" :key="item" style="margin-right: 5px;">{{ getRole(item) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="status_formatted"
                label="状态"
            >
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status === 1">{{ scope.row.status_formatted }}</el-tag>
                    <el-tag type="danger" v-else>{{ scope.row.status_formatted }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="editUser(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="text" @click="delUser(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top:10px;display:flex;justify-content: flex-end;">
            <el-pagination
                @size-change="changePageSize"
                @current-change="goPage"
                :current-page="page"
                :page-sizes="[20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>

        <el-dialog title="编辑用户" :visible.sync="showModal" width="40%">
            <el-form :model="form" :label-width="formLabelWidth">
                <el-form-item label="姓名" >
                    <el-input v-model="form.name" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="工号">
                    <el-input v-model="form.code" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="form.roles" placeholder="请选择角色" multiple style="width: 100%;">
                        <el-option v-for="item in roles" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio label="1" value="1">启用</el-radio>
                        <el-radio label="2" value="2">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showModal = false">取 消</el-button>
                <el-button type="primary" @click="doModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import authUsers from '@/api/setting/auth-users';

export default {
    data() {
        return {
            page: 1,
            pageSize: 20,
            lock: false,
            list: [],
            total: 0,
            formLabelWidth: '80px',
            showModal: false,
            search: {
                name: '',
                code: ''
            },
            form: {
                id: 0,
                name: '',
                code: '',
                password: '',
                roles: [],
                status: 1
            },
            roles: []
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await authUsers.getList({page: this.page, size: this.pageSize, name: this.search.name, code: this.search.code});
            this.list = res.data.list;
            this.total = res.data.total;
            this.roles = res.data.roles;
        },
        editUser(index, row) {
            console.log(row)
            for (let i in this.form) {
                this.form[i] = row[i];
            }
            this.showModal = true;
        },
        delUser(index, row) {
            this.$confirm('是否确认删除该用户?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await authUsers.delete({id: row.id});
                if (res.code === 0) {
                    this.$message.success(res.msg);
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                } 
            }).catch(() => {});
        },
        changePageSize(size) {
            this.pageSize = size;
            this.page = 1;
            this.getList();
        },
        goPage(page) {
            this.page = page;
            this.getList();
        },
        doSearch() {
            this.page = 1;
            this.getList();
        },
        async doModify() {
            if (this.lock === true) {
                return false;
            }
            this.lock = true;
            let res = await authUsers.modify(this.form);
            
            this.lock = false;
            if (res.code === 0) {
                this.$message.success(res.msg);
                this.showModal = false;
                this.getList();
            } else {
                this.$message.error(res.msg);
            }
        },
        getRole(role) {
            let item = this.roles.find((item) => {
                return item.id === role;
            });
            return item.name;
        }

    }
};
</script>

<style lang="scss">
    .el-form-item--small.el-form-item {
        margin-bottom: 18px;
    }
</style>